<template>
  <div class="app-container">
    <el-form label-width="80px">
      <h5>基本信息</h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单据编号" prop="documentNumber">
            <el-input v-model="this.workerNeedPojo.documentNumber" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用工时间" prop="needTime">
            <el-input v-model="this.workerNeedPojo.needTime" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="业务填报" prop="fillInName">-->
<!--            <el-input v-model="this.workerNeedPojo.fillInName" :disabled="true" maxlength="30"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="班组" prop="team">
            <el-input v-model="this.workerNeedPojo.team" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="班次" prop="timeShift">
            <el-input v-model="this.workerNeedPojo.timeShift" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预估业务量" prop="beforehandWork">
            <el-input v-model="this.workerNeedPojo.beforehandWork" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="this.workerNeedPojo.remark" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="缺口人数" prop="lackNumber">-->
<!--            <el-input v-model="this.workerNeedPojo.lackNumber" :disabled="true" maxlength="30"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
    </el-form>
    <h5>用工需求汇总信息</h5>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="workerTime" label="用工日期" width="250"/>
      <el-table-column :label= this.workerNeedPojo.timeShift>
        <el-table-column prop="beforehandNumber" label="预估用工量" width="220" align="center"></el-table-column>
        <el-table-column prop="realNumber" label="上一班实际人数" width="220" align="center">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.realNumber" size="small" clearable placeholder="请输入数量" @input="getLackNumber"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="lackNumber" label="缺口人数" width="220" align="center"/>
        <el-table-column prop="lackNumberMan" label="缺口男工人数" width="220" align="center">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.lackNumberMan" size="small" clearable placeholder="请输入数量" @input="getlackNumberWoman"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="lackNumberWoman" label="缺口女工人数" width="220" align="center">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.lackNumberWoman" size="small" clearable placeholder="请输入数量" @input="getlackNumberMan"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updateWorkerNeed">提 交</el-button>
    </div>
  </div>
</template>

<script>
  import { viewWorkerNeed , updateWorkerNeed } from "@/api/job/workerNeed/workerNeed";
  export default {
    name: "attendanceGroup",
    created() {
      this.viewWorkerNeed();
    },
    data() {
      return {
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        menuExpand: false,
        menuNodeAll: false,
        deptExpand: true,
        deptNodeAll: false,
        workerNeedId: this.$route.query.workerNeedId,
        workerNeedPojo:undefined,
        tableData: [],
        taskNumber: undefined,
        needTime: undefined,
        remark: undefined,
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },

    methods: {
      viewWorkerNeed() {
        viewWorkerNeed(this.workerNeedId).then(es => {
          this.workerNeedPojo = es.data.workerNeedPojo;
          this.tableData.push(es.data.workerNeedPojo);
        })
      },
      updateWorkerNeed() {
        let lackNumber = this.workerNeedPojo.lackNumber;
        if (lackNumber == 0){
          this.workerNeedPojo.lackNumberMan = 0;
          this.workerNeedPojo.lackNumberWoman = 0;
        }

        if ('' == String(this.workerNeedPojo.realNumber)){
          alert("数据有空值");
          throw "";
        }
        if ('' == String(this.workerNeedPojo.lackNumberMan)){
          alert("数据有空值");
          throw "";
        }
        if ('' == String(this.workerNeedPojo.lackNumberWoman)){
          alert("数据有空值");
          throw "";
        }
        if (Number(this.workerNeedPojo.realNumber) < 0){
          alert("数据有负数");
          throw "";
        }
        if (Number(this.workerNeedPojo.lackNumberMan) < 0){
          alert("数据有负数");
          throw "";
        }
        if (Number(this.workerNeedPojo.lackNumberWoman) < 0){
          alert("数据有负数");
          throw "";
        }
        if (String(this.workerNeedPojo.realNumber).indexOf('.') != -1) {
          alert("数据有小数");
          throw "";
        }
        if (String(this.workerNeedPojo.lackNumberMan).indexOf('.') != -1) {
          alert("数据有小数");
          throw "";
        }
        if (String(this.workerNeedPojo.lackNumberWoman).indexOf('.') != -1) {
          alert("数据有小数");
          throw "";
        }
        updateWorkerNeed(this.workerNeedPojo).then(es => {
          this.msgSuccess("提交成功");
          this.open = false;
        })
      },
      getLackNumber(){
        this.workerNeedPojo.lackNumber = this.workerNeedPojo.beforehandNumber-this.workerNeedPojo.realNumber;
      },
      getlackNumberWoman(){
        this.workerNeedPojo.lackNumberWoman = this.workerNeedPojo.lackNumber-this.workerNeedPojo.lackNumberMan;
      },
      getlackNumberMan(){
        this.workerNeedPojo.lackNumberMan = this.workerNeedPojo.lackNumber-this.workerNeedPojo.lackNumberWoman;
      }
    },
  };
</script>
